import React from 'react';
import {
  Radio,
} from 'antd';
import { LogoHeader } from '../../components/Header';
import {
  Checkbox,
} from '../../components/Form';

import styles from './index.module.less';

export default class ConfirmOrder extends React.Component {
  state = {
    selectedLogisticsType: null,
    supportReceipt: true,
    selectedReceiptType: null,
  };

  onLogisticsItemSelect = type => {
    this.setState({
      selectedLogisticsType: type,
    });
  };

  onReceiptItemSelect = type => {
    this.setState({
      selectedReceiptType: type,
    });
  };

  render() {
    const { selectedLogisticsType, supportReceipt, selectedReceiptType } = this.state;

    return (
      <React.Fragment>
        <LogoHeader moduleName='结算' />
        <div className={styles.content}>
          <div className={styles.box}>
            <div className={styles.confirmOrderAddressBox}>
              <div className={styles.addressTitle}>
                收货地址
              </div>
              <div className={styles.addressForm}>
                <div className={styles.defaultAddressBox}>
                  <Radio.Group>
                    <div className={styles.defaultAddress}>
                      <Radio value={0}>浙江省 杭州市 拱墅区 余杭塘路478号海蓝创智天地503室</Radio>
                    </div>
                    <div>
                      <Radio value={1}>使用新地址</Radio>
                    </div>
                  </Radio.Group>
                </div>
                <div className={styles.createFormBox}>
                  <div className={`${styles.formItem} ${styles.clearfix}`}>
                    <div className={styles.formItemLabel}>
                      收&ensp;货&ensp;人：
                    </div>
                    <div className={styles.formItemControl}>
                      <input className={styles.receiver} type="text" />
                    </div>
                  </div>
                  <div className={`${styles.formItem} ${styles.clearfix}`}>
                    <div className={styles.formItemLabel}>
                      所在地区：
                    </div>
                    <div className={styles.formItemControl}>
                      <input className={styles.area} type="text" />
                    </div>
                  </div>
                  <div className={`${styles.formItem} ${styles.clearfix}`}>
                    <div className={styles.formItemLabel}>
                      详细地址：
                    </div>
                    <div className={styles.formItemControl}>
                      <textarea className={styles.fullAddress}></textarea>
                    </div>
                  </div>
                  <div className={`${styles.formItem} ${styles.clearfix}`}>
                    <div className={styles.formItemLabel}>
                      手&ensp;&ensp;&ensp;&ensp;机：
                    </div>
                    <div className={styles.formItemControl}>
                      <input className={styles.mobile} type="text" />
                    </div>
                  </div>
                  <div className={`${styles.formItem} ${styles.clearfix}`}>
                    <div className={styles.formItemLabel}>
                      固定电话：
                    </div>
                    <div className={styles.formItemControl}>
                      <input className={styles.start} type="text" />
                      <input className={styles.center} type="text" />
                      <input className={styles.end} type="text" />
                    </div>
                  </div>
                  <div className={`${styles.formItem} ${styles.clearfix}`}>
                    <div className={styles.formItemLabel}></div>
                    <div className={styles.formItemControl}>
                      <div className={styles.defaultCheckBox}>
                        <div className={styles.checkbox}>
                          <Checkbox />
                        </div>
                        <span className={styles.text}>设为默认地址</span>
                      </div>
                    </div>
                  </div>
                  <div className={`${styles.formItem} ${styles.clearfix}`}>
                    <div className={styles.formItemLabel}></div>
                    <div className={styles.formItemControl}>
                      <button className={styles.createAddressBtn}>确认收货地址</button>
                    </div>
                  </div>
                  <div className={styles.unlessBox}>
                    <div className={styles.unlessLine}></div>
                    <div className={styles.unlessText}>至少写一个</div>
                  </div>
                </div>
              </div>
            </div>
            <div className={styles.orderInfoTitle}>
              <div className={styles.line}></div>
              <div className={styles.text}>订单信息</div>
            </div>
            <div className={styles.sellerListBox}>
              <div className={styles.sellerItemBox}>
                <div className={styles.sellerTitle}>卖家：杭州塑料有限公司</div>
                <div className={styles.sellerDetailBox}>
                  <div className={`${styles.rowBox} ${styles.clearfix}`} style={{ marginBottom: 25 }}>
                    <div className={styles.detailBoxLabel}>订单：</div>
                    <div className={styles.detailBoxContent}>
                      <div className={styles.orderListBox}>
                        <div className={styles.orderItemHead}>
                          <div className={styles.info}>货品信息</div>
                          <div className={styles.unitPrice}>单价（元）</div>
                          <div className={styles.count}>数量</div>
                          <div className={styles.subtotal}>小计</div>
                        </div>
                        <div className={styles.orderItem}>
                          <div className={`${styles.info} ${styles.clearfix}`}>
                            <div className={styles.goodsImg}>
                              <a href=''>
                                <img src='https://gd2.alicdn.com/imgextra/i2/2846819868/TB2kVA8GeuSBuNjSsziXXbq8pXa_!!2846819868.jpg' alt='图片' />
                              </a>
                            </div>
                            <div className={styles.goodsInfoText}>
                              <a href=''>
                                现货【送无线充/送延保/送壳膜】iphonex Apple/苹果 iPhone X 苹果x 苹果10全网通手机咨询购买iphonexs max
                              </a>
                            </div>
                          </div>
                          <div className={styles.unitPrice}>
                            3200元/吨
                          </div>
                          <div className={styles.count}>
                            2.5吨
                          </div>
                          <div className={styles.subtotal}>
                            ￥4000.00
                          </div>
                        </div>
                        <div className={styles.orderItem}>
                          <div className={`${styles.info} ${styles.clearfix}`}>
                            <div className={styles.goodsImg}>
                              <a href=''>
                                <img src='https://gd2.alicdn.com/imgextra/i2/2846819868/TB2kVA8GeuSBuNjSsziXXbq8pXa_!!2846819868.jpg' alt='图片' />
                              </a>
                            </div>
                            <div className={styles.goodsInfoText}>
                              <a href=''>
                                现货【送无线充/送延保/送壳膜】iphonex Apple/苹果 iPhone X 苹果x 苹果10全网通手机咨询购买iphonexs max
                              </a>
                            </div>
                          </div>
                          <div className={styles.unitPrice}>
                            3200元/吨
                          </div>
                          <div className={styles.count}>
                            2.5吨
                          </div>
                          <div className={styles.subtotal}>
                            ￥4000.00
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className={`${styles.rowBox} ${styles.clearfix}`}>
                    <div className={styles.detailBoxLabel}>物流方式：</div>
                    <div className={styles.detailBoxContent}>
                      <div className={styles.logisticsBox}>
                        <div className={`${styles.logisticsSelectBox} ${styles.clearfix}`}>
                          <div
                            className={`${styles.logisticsSelectItem} ${selectedLogisticsType === 'buyerPay' ? styles.active : ''}`}
                            onClick={this.onLogisticsItemSelect.bind(this, 'buyerPay')}
                          >
                            {
                              selectedLogisticsType === 'buyerPay' ? (
                                <div className={styles.specialText}>
                                  <div>买家承担运费</div>
                                  <div className={styles.money}>运费金额：200元</div>
                                </div>
                              ) : (
                                <div className={styles.text}>
                                  买家承担运费
                                </div>
                              )
                            }
                            {
                              selectedLogisticsType === 'buyerPay' && <i className={`iconfont icon-xuanze ${styles.icon}`}></i>
                            }
                          </div>
                          <div
                            className={`${styles.logisticsSelectItem} ${selectedLogisticsType === 'consult' ? styles.active : ''}`}
                            onClick={this.onLogisticsItemSelect.bind(this, 'consult')}
                          >
                            <div className={styles.text}>
                              买卖双方商议
                            </div>
                            {
                              selectedLogisticsType === 'consult' && <i className={`iconfont icon-xuanze ${styles.icon}`}></i>
                            }
                          </div>
                          <div
                            className={`${styles.logisticsSelectItem} ${selectedLogisticsType === 'selfLifting' ? styles.active : ''}`}
                            onClick={this.onLogisticsItemSelect.bind(this, 'selfLifting')}
                          >
                            <div className={styles.text}>
                              上门自提
                            </div>
                            {
                              selectedLogisticsType === 'selfLifting' && <i className={`iconfont icon-xuanze ${styles.icon}`}></i>
                            }
                          </div>
                          {
                            selectedLogisticsType === 'buyerPay' && (
                              <div className={styles.outOfRange}>
                                *该收货地址不在配送范围，请与商户联系
                              </div>
                            )
                          }
                        </div>
                        <div className={styles.logisticsForm}>
                          {
                            selectedLogisticsType === 'consult' && (
                              <div className={`${styles.consultBox} ${styles.clearfix}`}>
                                <div className={styles.logisticsFormLabel}>请输入运费</div>
                                <div className={styles.logisticsFormControl}>
                                  <input className={styles.logisticsFormInput} type='text' />
                                </div>
                                <div className={styles.other}>
                                  *运费务必跟卖家打成一致，否则卖家有权不发货
                                </div>
                              </div>
                            )
                          }
                          {
                            selectedLogisticsType === 'selfLifting' && (
                              <div className={`${styles.selfLiftingBox} ${styles.clearfix}`}>
                                <div className={styles.logisticsFormLabel}>请选择自提点</div>
                                <div className={styles.logisticsFormControl}>
                                  自提点名称：余杭塘路     浙江省杭州市拱墅区余杭塘路478号    18888888888      周一 周二 周三 周四  周五  周六  周日    12:12—12:12
                                </div>
                                <div className={styles.other}>
                                  修改
                                </div>
                              </div>
                            )
                          }
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className={`${styles.rowBox} ${styles.clearfix}`}>
                    <div className={styles.detailBoxLabel}>发票信息：</div>
                    <div className={styles.detailBoxContent}>
                      <div className={styles.receiptBox}>
                        {
                          supportReceipt ? (
                            <React.Fragment>
                              <div className={`${styles.receiptSelectBox} ${styles.clearfix}`}>
                                <div
                                  className={styles.receiptSelectItem}
                                  onClick={this.onReceiptItemSelect.bind(this, 'noTax')}
                                >
                                  不开具发票
                                </div>
                                <div
                                  className={styles.receiptSelectItem}
                                  onClick={this.onReceiptItemSelect.bind(this, 'normalTax')}
                                >
                                  普通发票（电子）
                                </div>
                                <div
                                  className={styles.receiptSelectItem}
                                  onClick={this.onReceiptItemSelect.bind(this, 'addedTax')}
                                >
                                  增值税专用发票（电子）
                                </div>
                              </div>
                              {
                                (selectedReceiptType === 'normalTax' || selectedReceiptType === 'addedTax') && (
                                  <div className={`${styles.receiptForm} ${styles.clearfix}`}>
                                    <div className={`${styles.receiptFormControl} ${styles.clearfix}`}>
                                      <div className={styles.name}>
                                        发票抬头：杭州巨擘科技有限公司
                                      </div>
                                      <div className={styles.number}>
                                        纳税人识别号：123123123123123123123123
                                      </div>
                                      <div className={styles.address}>
                                        注册地址：浙江省杭州市拱墅区祥符街道海蓝创智天地503
                                      </div>
                                    </div>
                                    <div className={styles.other}>
                                      更改
                                    </div>
                                  </div>
                                )
                              }
                            </React.Fragment>
                          ) : (
                            <div className={styles.unSupport}>
                              *该商家商品不支持开具发票，如有疑问请咨询商家。
                            </div>
                          )
                        }
                      </div>
                    </div>
                  </div>
                  <div className={styles.divider}></div>
                  <div className={`${styles.rowBox} ${styles.clearfix}`}>
                    <div className={styles.detailBoxLabel}>给卖家留言：</div>
                    <div className={styles.detailBoxContent}>
                      <div className={`${styles.settlementBox} ${styles.clearfix}`}>
                        <div className={styles.remarkBox}>
                          <textarea placeholder='可以告诉卖家您的特殊要求，若您需要改变订单内容或另有特殊需求，请务必与卖家确认一致，负责，该填写内容将视为无效' maxLength={500}></textarea>
                          <div className={styles.leftInputNumber}>
                            当前已输入0/500字
                          </div>
                        </div>
                        <div className={styles.bonusCountBox}>
                          <div className={`${styles.bonusRow} ${styles.clearfix}`}>
                            <div className={`${styles.left} ${styles.selectLeft}`}>
                              <div className={styles.bonusSelect}>
                                满100减10 ∨
                              </div>
                            </div>
                            <div className={`${styles.right} ${styles.selectRight}`}>
                              <span>-10.00</span> 元
                            </div>
                          </div>
                          <div className={`${styles.bonusRow} ${styles.clearfix}`}>
                            <div className={styles.left}>
                              运费共计：
                            </div>
                            <div className={styles.right}>
                              <span>6.00</span> 元
                            </div>
                          </div>
                          <div className={`${styles.bonusRow} ${styles.clearfix}`}>
                            <div className={styles.left}>
                              订单总金额：
                            </div>
                            <div className={styles.right}>
                              <span>10238.00</span> 元
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className={styles.bottomBox}>
              <div className={styles.borderedBox}>
                <div className={styles.leftHandleBox}>
                  <div className={styles.handleText}>
                    返回购物车
                  </div>
                </div>
                <div className={styles.rightHandleBox}>
                  <div className={styles.countText}>
                    运费总计：0元
                  </div>
                  <div className={styles.countText}>
                    货品总额：32000元
                  </div>
                  <div className={styles.amountText}>
                    <span className={styles.text}>应付总额：</span>
                    <span className={styles.number}>￥1600.00</span>
                  </div>
                </div>
              </div>
              <button className={styles.settlementBtn}>
                提交订单
              </button>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}
